import React, { useState } from 'react';
import './index.scss';
import '../rem';
import '@/static/iconfont.css';
import { Avatar, List, Space } from 'antd-mobile';
import sc from '@/assets/1.webp';
import { history } from 'umi';
import { Toast } from 'antd-mobile';
import { Overlay, Button } from 'react-vant';
import { createFromIconfontCN } from '@ant-design/icons';
import { Barrage } from '@nutui/nutui-react';

const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_3879303_qw5ynm1v27a.js', // 在 iconfont.cn 上生成
});

export default function Index() {
  const [visible, setVisible] = useState(false);
  let state = localStorage.getItem('hunliji_token');
  let aa = localStorage.getItem('hunliji_token');

  return (
    <div className="indexbox">
      {aa ? (
        <div className="top">
          <div className="zi">
            <span className="xiaoxi">
              <MyIcon type="icon-xiaoxi" />
            </span>
            <span className="hlj">婚礼纪</span>
          </div>
          <div className="top_cen">
            <Avatar src={sc} style={{ '--border-radius': '50%' }} />
            <div className="name">
              {state}
              <div
                style={{ fontSize: '.1rem', color: 'gray' }}
                onClick={() => {
                  localStorage.removeItem('hunliji_token');
                  history.push('/my');
                  Toast.show({
                    icon: 'success',
                    content: '退出成功',
                  });
                }}
              >
                退出
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="top">
          <div className="zi">
            <span className="xiaoxi">
              <span className="icon-xiaoxi iconfont"></span>
            </span>
            <span className="hlj">婚礼纪</span>
          </div>
          <div className="top_cen">
            <Avatar src="" style={{ '--border-radius': '50%' }} />
            <div className="name">
              请登录
              <div
                style={{ fontSize: '.1rem', color: 'gray' }}
                onClick={() => {
                  history.push('/');
                }}
              >
                登录查看更多信息
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="box">
        <div className="center1">
          <div
            className="icon-youhuiquan iconfont"
            onClick={() => {
              if (aa) {
                history.push('/youhui');
              } else {
                Toast.show({
                  icon: 'fail',
                  content: '您还没有登录哦，请登录',
                });
              }
            }}
          >
            <p> 优惠券</p>
          </div>
          <div
            className="icon-wodeshoucang iconfont"
            onClick={() => {
              if (aa) {
                history.push('/shoucang');
              } else {
                Toast.show({
                  icon: 'fail',
                  content: '您还没有登录哦，请登录',
                });
              }
            }}
          >
            <p>我的收藏</p>
          </div>
          <div className="icon-yuyue iconfont">
            <p>订单预约</p>
          </div>
        </div>
        <div className="center">
          <span>备婚工具</span>
          <div className="center2">
            <div
            // className="icon-xinjian iconfont"

            // onClick={() => setVisible(true)}
            >
              <MyIcon
                type="icon-xinjian"
                onClick={() => {
                  history.push('/qingtie');
                }}
              />
              <p> 电子请帖</p>
            </div>
            <div
              onClick={() => {
                history.push('/goodday');
              }}
            >
              <MyIcon type="icon-a-shijiannaozhong2" />
              <p>婚礼吉日</p>
            </div>
            <div
              onClick={() => {
                if (aa) {
                  history.push('/xianchang');
                } else {
                  Toast.show({
                    icon: 'fail',
                    content: '您还没有登录哦，请登录',
                  });
                }
              }}
            >
              <MyIcon type="icon-aixin" />
              <p>婚礼现场</p>
            </div>
          </div>
        </div>
        <div
          className="imgss"
          onClick={() => {
            history.push('/chouj');
          }}
        >
          <img src={require('./img/1.png')} alt="" />
          <div className="test">{/* 呼吸的效果 */}</div>
        </div>
      </div>
    </div>
  );
}
